<template>
  <div class="post-actions">
    <button 
      @click="handleLike"
      :class="{ 'text-primary': isLiked }"
      class="btn btn-sm btn-outline-primary me-2"
    >
      <i class="bi" :class="isLiked ? 'bi-heart-fill' : 'bi-heart'"></i> 
      {{ likeCount }}
    </button>
    
    <button 
      @click="toggleComments"
      class="btn btn-sm btn-outline-primary me-2"
    >
      <i class="bi bi-chat-right-dots"></i> 
      {{ commentCount }}
    </button>
    
    <button 
      @click="handleCollect"
      :class="{ 'text-danger': isCollected }"
      class="btn btn-sm btn-outline-primary"
    >
      <i class="bi" :class="isCollected ? 'bi-star-fill' : 'bi-star'"></i>
      {{ collectCount }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'PostActions',
  props: {
    initialLikes: { type: Number, default: 0 },
    initialComments: { type: Number, default: 0 },
    initialCollects: { type: Number, default: 0 },
    initialIsLiked: { type: Boolean, default: false },
    initialIsCollected: { type: Boolean, default: false }
  },
  emits: ['toggle-comments'],
  setup(props, { emit }) {
    const isLiked = ref(props.initialIsLiked)
    const likeCount = ref(props.initialLikes)
    const commentCount = ref(props.initialComments)
    const isCollected = ref(props.initialIsCollected)
    const collectCount = ref(props.initialCollects)

    const handleLike = () => {
      isLiked.value = !isLiked.value
      likeCount.value += isLiked.value ? 1 : -1
      // 这里可以添加API调用
    }

    const handleCollect = () => {
      isCollected.value = !isCollected.value
      collectCount.value += isCollected.value ? 1 : -1
      // 这里可以添加API调用
    }

    const toggleComments = () => {
      emit('toggle-comments')
    }

    return {
      isLiked,
      likeCount,
      commentCount,
      isCollected,
      collectCount,
      handleLike,
      handleCollect,
      toggleComments
    }
  }
})
</script>

<style>
.post-actions {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}
</style>